<template>
  <div>
    <mt-header fixed title="单项赛个人报名">
      <mt-button icon="back" @click='$router.back(-1)' slot="left"></mt-button>
    </mt-header>
    <div style="height:40px;"></div>
    <div class="top-title"><i class="gray">比赛名称: </i>2019长沙岳麓区第N届羽毛球邀请赛</div>
    <div class="top-title"><i class="gray">比赛组别：</i>青年组 - 20至30岁</div>
    <step current=5 :stepArr="stepArr"></step>    
    <div>  
      <div class="f16 m10 fwb">报名预览</div>
      <div class="field-list">
        <div class="field-item" :class="{ 'open': item.show }" v-for="(item, index) in options">
            <div class="field-item-in"  @click="item.show = !item.show">
              <span class="field-item-in-l">{{item.label}}</span>
              <div class="field-item-in-r tr"></div> 
            </div>
            <div class="field-item-box" style="display: block;">
              <div style="background:#f6f6f6; padding:3px 7px; margin:5px 10px; " v-for="(p, i) in item.list" >
                <p style="display:flex;"><span style="flex:1">{{ getCertName(p.certType) }}</span><span style="flex:1">{{p.certNo}}</span></p>
                <p style="display:flex;"><span style="flex:1">{{p.name}}</span><span style="flex:1">{{p.mobile}}</span></p>
                <p style="display:flex;"><span style="flex:1">{{p.age}}岁</span><span style="flex:1">{{ getSexName(p.sex) }}</span></p>
              </div>
            </div>
        </div>
      </div>
      <div style="display: flex; margin:10px;">        
        <mt-button style="flex:1;" @click='$router.push("/enroll/single/step4")' plain class="mr10" type="primary">上一步</mt-button>
        <mt-button style="flex:1;" @click='$router.push("/enroll/single/step6")' type="primary">下一步</mt-button>
      </div>
    </div> 
  </div>
</template>
<script>
import step from '@/components/step' 
var obj = {
        "name":"张三丰",
        "certType":1,
        "certNo":"430125198805201215",
        "sex":"male",
        "age":"33",
        "mobile":"13912345678"
      }
export default {
  components:{
    step
  },
  data () {
    return {
      stepArr:['填写信息','选择俱乐部','选择项目','选择搭档','报名预览','支付完成'],
      certList:[{value:"1",name:"身份证"},{value:"2",name:"学生证"},{value:"3",name:"港澳通行证"},{value:"4",name:"护照"}],
      sexArr:[{value:'male',name:'男'},{value:'female',name:'女'}],
      options:[
        {
          label: '男单',
          list: [obj],
          show:false
        },
        {
          label: '男双',
          list: [obj,obj],
          show:false
        },
        {
          label: '3V3',
          list: [obj,obj,obj],
          show:false
        }
      ],
    }
  },
  mounted(){
    
  },
  methods:{
    getTxt(n){
      if(n > 0){
        return n + "位搭档";
      }else{
        return "无搭档";
      }
    },
    getCertName(t){
      var arr = this.certList;
      var str = '';
      for (var i = 0; i < arr.length; i++) {
        if(arr[i]["value"] == t){
          str = arr[i]["name"];
        }
      }
      return str;
    },    
    getSexName(t){
      var arr = this.sexArr;
      var str = '';
      for (var i = 0; i < arr.length; i++) {
        if(arr[i]["value"] == t){
          str = arr[i]["name"];
        }
      }
      return str;
    }
  }
}
</script>
